<template>
  <div class="IndexContainer">
    <!--轮播图-->
    <el-carousel class="swiper" :interval="4000" arrow="always">
      <el-carousel-item v-for="item in swiperList" :key="item">
        <a :href="item.link" target="_blank">
          <img v-lazyload="item.appAdvertiseUrl" width="1200" height="446" alt=""/>
        </a>
      </el-carousel-item>
    </el-carousel>
    <!-- 二级导航 -->
    <div class="twoNav">
      <router-link :class="$router.currentRoute.value.path === '/index/'+menuItem.path ? 'active' : '' " v-for="menuItem in RoutesMenu" :key="menuItem.name" class="menuItem" :to="'/index/'+menuItem.path">{{menuItem.meta.title}}</router-link>
      <span style="float: right;display: inline-block;margin-top: 30px;height: 30px;line-height: 30px;font-size: 20px" @click="showDialog" class="menu_dialog"
      ><el-icon style="top: 2px"><Search /></el-icon>选择更多兴趣技能</span
      >
    </div>
    <div style="height: 20px"></div>
  </div>
  <!-- 二级导航页面 -->
  <router-view></router-view>
  <!-- 添加兴趣弹窗 -->
  <!-- 弹窗区域 -->
  <el-dialog
      v-model="dialogVisible"
      width="70%"
      align-center
      title="选择兴趣技能"
  >
    <span class="such">例如舞蹈就选舞种</span>
    <div class="search">
      <el-input
          :prefix-icon="Search"
          placeholder="搜索兴趣技能"
          style="width: 300px; margin-right: 20px; background-color: #f5f7f9"
      />
      <el-button color="#f5f7f9" style="color: #7d8090">搜索</el-button>
    </div>
    <div class="subs">
      <div class="subsTitle">推荐兴趣技能</div>
      <div class="subsList">
        <el-tag
            size="large"
            effect="plain"
            style="
							padding: 20px 30px;
							margin: 20px 30px 30px 0;
							color: #333;
							border: 1px solid #ccc;
						"
        >古典舞</el-tag
        >
        <el-tag
            size="large"
            effect="plain"
            style="
							padding: 20px 30px;
							margin: 20px 30px 30px 0;
							color: #333;
							border: 1px solid #ccc;
						"
        >古典舞</el-tag
        >
        <el-tag
            size="large"
            effect="plain"
            style="
							padding: 20px 30px;
							margin: 20px 30px 30px 0;
							color: #333;
							border: 1px solid #ccc;
						"
        >古典舞</el-tag
        >
        <el-tag
            size="large"
            effect="plain"
            style="
							padding: 20px 30px;
							margin: 20px 30px 30px 0;
							color: #333;
							border: 1px solid #ccc;
						"
        >古典舞</el-tag
        >
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
  name: "Index",
});

</script>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {useRouter,useRoute} from "vue-router";
import {cloneDeep} from "lodash";
import { Search } from "@element-plus/icons-vue";
import {reqGetSwiperAsync} from "@/api/home";
import {ElMessage} from "element-plus";

const $router = useRouter();
const $route = useRoute();
// 保存路有菜单
let RoutesMenu = ref<any>('')
onMounted(()=>{
    RoutesMenu.value = cloneDeep($route.matched[0].children);
})
// 弹窗初始状态
const dialogVisible = ref(false);

// 点击更多展示弹窗
const showDialog = () => {
  dialogVisible.value = true;
};

// 保存轮播图数据
const swiperList = ref([]);
const getSwiperList = async ()=>{
  try {
    const re = await reqGetSwiperAsync()
    swiperList.value = re.data.content
  }catch (e) {
    ElMessage.error('获取轮播图数据失败')
  }
}
onMounted(()=>{
  getSwiperList()
})

</script>

<style lang="scss" scoped>
.IndexContainer{
  width: 1200px;
  margin: 0px auto;
  text-align: center;
  background-color: #fff;
}
.swiper {
  width: 1200px;
  height: 446px;
  margin-top: 20px;
}
.el-carousel__item h3 {
  color: #686767;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.twoNav{
  height: 70px;
  .menuItem{
    display:inline-block;
    text-decoration:none;
    margin: 10px 20px;
    line-height: 70px;
    font-size: 20px;
    color: #ccc;
  }
}
.active{
  color: #1a1a1a !important;
  border-bottom: 3px solid black;
}

// 弹窗样式
:deep(.el-dialog) {
  .el-dialog__body {
    padding: 0  20px;
    .such{
      color: #ccc;
      display: block;
      margin-bottom: 20px;
    }
    .search{
      margin-bottom: 20px;
    }
  }
}
</style>
<style>
.el-carousel__container{
  height: 446px;
}
.el-carousel__button{
  margin:0 20px;
  width: 10px;
  height: 10px;
  text-align: center;
  border-radius: 50%;
}
</style>
